<html>
<head>
<link rel="stylesheet/less" type="text/css" href="demo.less">
<script src="less.min.js" type="text/javascript"></script>
<script>
document.onkeypress = keypress;
function keypress(evt) {
    var key = evt.which ? evt.which : evt.keyCode;
    if (key == 8) {
        window.history.go(-1);
    }
}
</script>
<style>
body {margin: 0; background-color: #eee}
.box {margin: 0 0 0 10px; width: 200px; height: 20px;}
</style>
</head>


<body>
<h1>LESS demo</h1>

<p>complementary color scheme</p>
<div class="box three"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box four"></div>
<div class="box five"></div>

<p>subtle color scheme</p>
<div class="box brown1"></div>
<div class="box brown2"></div>
<div class="box brown3"></div>
<div class="box brown4"></div>
<div class="box brown5"></div>

<p>round radius</p>
<div style="margin: 0 0 0 10px; width: 200px; height: 50px;" class="brown radiusdiv"></div>

<p>box shadow</p>
<div style="margin: 0 0 0 10px; width: 200px; height: 50px;" class="brown shadowdiv"></div>

<p>transform</p>
<div style="margin: 0 0 0 10px; width: 200px; height: 50px;" class="brown transformdiv"></div>

<p>linear-gradient</p>
<div style="margin: 0 0 0 10px; width: 200px; height: 50px;" class="brown linear-gradient_div"></div>

<p>quick-gradient</p>
<div style="margin: 0 0 0 10px; width: 200px; height: 50px;" class="brown quick-gradient_div"></div>

<p>transition</p>
<div style="margin: 0 0 0 10px; width: 200px; height: 50px;" class="brown transitiondiv"></div>

<p>reflect</p>
<div style="margin: 0 0 0 10px; width: 200px; height: 50px;" class="brown reflectdiv"></div>


</body>
</html>

